import React from "react"
import { Tabs } from "antd-mobile"
import "./index.css"
const Index = () => {
  const onChange = (key: string) => {
    console.log(key)
  }
  const items = [
    {
      key: "1",
      label: "洗面奶优惠套装",
      img: "https://img1.baidu.com/it/u=3505470809,2700212068&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      price: "156",
    },
    {
      key: "2",
      label: "活性洗面奶",
      img: "https://img2.baidu.com/it/u=4153595776,2626068247&fm=253&app=120&f=JPEG?w=800&h=800",
      price: "169",
    },
    {
      key: "3",
      label: "活性洗面奶",
      img: "https://img0.baidu.com/it/u=1940076636,3436861685&fm=253&fmt=auto?w=800&h=1046",
      price: "169",
    },
    {
      key: "4",
      label: "活性洗面奶",
      img: "https://img2.baidu.com/it/u=2654290220,2429398851&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1498",
      price: "169",
    },
  ]
  return (
    <div>
      <Tabs>
        <Tabs.Tab title="全部订单" key="1">
          {items.map(item => (
            <div key={item.key} className="tab-s-all">
              <img src={item.img} alt="" />
              <div>
                <span>{item.label}</span>
                <p>￥{item.price}</p>
              </div>
            </div>
          ))}
        </Tabs.Tab>
        <Tabs.Tab title="待付款" key="2">
          待付款
        </Tabs.Tab>
        <Tabs.Tab title="代发货" key="3">
          代发货
        </Tabs.Tab>
        <Tabs.Tab title="代收货" key="4">
          代收货
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}

export default Index
